import { Modal, Steps, Button } from 'antd';
import React from 'react';
import Title from '../Title/Title';
import styles from './index.less';
import moment from 'moment';

const { Step } = Steps;

const VerifyStep = props => {
    const { modalVisible, handleVerify, sData } = props;
	const filterInfo = val => {
		if (val === '1') {
			return '不同意'
		} else if (val === '0') {
			return '同意'
		} else if (val === '2') {
			return '驳回'
		} else if (val === '3') {
			return '发起'
		}
	}

	const formatMoment = (date) => {
		  const yearEq = moment(date).year() === moment().year()
		  const dayEq = moment(date).dayOfYear() === moment().dayOfYear()
		  const dayAgoEq = moment(date).format('YYYYMMDD') === moment().subtract(1, 'd').format('YYYYMMDD')
		  const hour3Ago = moment(date).add(3, 'h').valueOf() > Date.now()
		
		  switch (true) {
		    case hour3Ago:
		      return moment(date).fromNow()
		    case yearEq && dayEq:
		      return moment(date).format('HH:mm')
		    case dayAgoEq:
		      return moment(date).format('[昨天] HH:mm')
		    case yearEq:
		      return moment(date).format('MM[月] DD[日] HH:mm')
		    default:
		      return moment(date).format('YYYY[年] MM[月] DD[日]')
		  }
		}
    return (
        <Modal
					destroyOnClose={true}
					centered
					visible={modalVisible}
					onCancel={() => {handleVerify(false)}}
					width={480}
					footer={[
						<div style={{textAlign: "center"}} key="footer">
							<Button onClick={()=>{handleVerify(false)}} type="primary">关闭</Button>
						</div>
					]}
					title={[
						<Title key="title" title="审核流程" />
					]}
        >
					<Steps className={styles.stepBox} progressDot direction="vertical">
						{
							sData.map((val, index) => {
								return (
									<Step key={index} status="finish" title={[
										<div key={`title${index}`} className={ styles.stepBar }>
											<div>
												<div style={{fontSize: "18px", color: "#000", fontWeight: "bold", marginRight: "30px", verticalAlign: 'top'}}>{val.auditor}</div>
												<div title={val.job} style={{ width: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{val.job}</div>
											</div>
											<div>
												{formatMoment(val.auditTime)}
											</div>
										</div>
									]} description={[
										<div title={val.remark} key={`description${index}`} className={ styles.stepBar }>
											{val.remark?<div>
												备注：
												<span>{val.remark}</span>
											</div>:<div></div>}
											
											<div style={{width: "80px", marginLeft: "20px", textAlign: "right"}}>
												{filterInfo(val.opinion)}
											</div>
										</div>
									]} />
								)
							})
						}
						
						{/* <Step status="finish" title={[
							<div key="title1" className={ styles.stepBar }>
								<div>
									<span style={{fontSize: "18px", color: "#000", fontWeight: "bold", marginRight: "30px"}}>袁左宗</span>
									<span>值班经理</span>
								</div>
								<div>
									2012-12-11 14:25
								</div>
							</div>
						]} description={[
							<div key="description1" className={ styles.stepBar }>
								<div>
									备注：
									<span>该航班延误时长过长，为避免旅客冲突事件，请妥善安置旅客</span>
								</div>
								<div style={{width: "80px", marginLeft: "20px", textAlign: "right"}}>
									已通过
								</div>
							</div>
						]} />
						<Step status="finish" title={[
							<div key="title0" className={ styles.stepBar }>
								<div>
									<span style={{fontSize: "18px", color: "#000", fontWeight: "bold", marginRight: "30px"}}>徐骁</span>
									<span>调度员</span>
								</div>
								<div>
									2012-12-11 14:25
								</div>
							</div>
						]} description={[
							<div key="description0" className={ styles.stepBar }>
								<div>
									备注：
									<span>该航班深度延时8小时，旅客情绪激化</span>
								</div>
								<div style={{width: "80px", marginLeft: "20px", textAlign: "right"}}>
									发起申请
								</div>
							</div>
						]} /> */}
					</Steps>
        </Modal>
    )
}

export default VerifyStep;